<template>
	<view class="content">
		<view class="bg">
			<view class="swiper-container">
				<swiper class="swiper" :indicator-dots="false" autoplay="true" interval="5000" previous-margin="150rpx"
					next-margin="150rpx" circular="true" duration="1000" :current="current" @change="changeCurrent">
					<swiper-item v-for="item in lunboUrl" :key="item.id" @tap="toList($event,item.id)"
						data-class="zhuanji">
						<view class="swiper-item ">
							<image class="height" :class="current==item.id?'no-animate':'animate'" :src="item.photo"
								mode="aspectFit">
							</image>
						</view>
						<view class="lunboTitle"><text>{{item.name}}</text></view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="search-container" @tap="toSearch">
			<swiper vertical="true" autoplay="true" class="search-swiper" circular="true" current="1">
				<swiper-item v-for="item in lunboUrl" :key="item.id">
					<view>{{item.name}}</view>
				</swiper-item>
			</swiper>
			<view class="search-icon">
				<image src="/static/img/search.png"></image>
			</view>
		</view>
		<view class="card">
			<view class="card-item " @tap="toList($event,item.id)" :class="`bg${item.id}`" v-for="(item,i) in cate" :key="i" data-class="category">
				<view class="t">
					<view class="title">{{item.category}}</view>
					<view class="icon">
						<image :src="`/static/img/box${item.id}.png`"></image>
					</view>
				</view>
				<view class="b">
					<view>{{item.english}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lunboUrl: [],
				current: 0,
				cate: []
			}
		},
		onLoad() {
			this.getLunbo()
			this.getcate()
		},
		methods: {
			toSearch(){
				uni.navigateTo({
					url:"/pages/search/search"
				})
			},
			toList(e, id) {
				let which = e.currentTarget.dataset.class
				uni.setStorageSync("which", which)
				uni.navigateTo({
					url: '/pages/list/index?id=' + id
				})
			},
			// 封装请求乐谱分类的函数
			async getcate() {
				let res = await this.$request({
					url: '/category'
				})
				this.cate = res
			},
			// 封装请求轮播图数据的函数
			async getLunbo() {
				let res = await this.$request({
					url: '/zhuanji'
				})
				this.lunboUrl = res
			},
			changeCurrent(e) {
				this.current = e.detail.current
			}
		}
	}
</script>

<style>
	.height {
		height: 200rpx;
	}

	.search-swiper {
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
	}

	.search-icon {
		width: 10%
	}

	.search-icon image {
		width: 56rpx;
		height: 56rpx;
	}

	.search-container {
		margin: 10rpx auto;
		width: 90%;
		border: 2rpx solid #888;
		border-radius: 50rpx;
		box-sizing: border-box;
		padding: 10rpx 25rpx;
		display: flex;
		justify-content: space-between
	}

	.swiper-item .no-animate {
		transform: none;
		transition: all .2s ease;
	}

	.swiper-item .animate {
		transform: scale(0.9);
		transition: all .2s ease;
	}

	.lunboTitle {
		margin-top: 20rpx;
		text-align: center;
	}

	.swiper-container {
		box-sizing: border-box;
		padding: 40rpx 0;
	}

	.swiper-item>image {
		width: 400rpx;
	}


	.swiper-item {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.card {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		color: #fff;
		box-sizing: border-box;
		padding: 20rpx;
	}

	/* .card>view:nth-child(odd){
	  transform: translateX(-50rpx);
	  opacity: 0;
	  transition: all 2s ease ;
	}
	.card>view:nth-child(even){
	  transform: translateX(50rpx);
	  opacity: 0;
	  transition: all 2s ease ;
	}
	.card>view.animated{
	  transform: none;
	  opacity: 1;
	} */
	.card-item {
		width: 45%;
		margin-top: 40rpx;
		box-sizing: border-box;
		padding: 20rpx 10rpx;
		border-radius: 20rpx;
	}

	.card-item .t {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.card-item .t .title {
		width: 70%;
		font-size: 38rpx;
	}

	.card-item .t .icon {
		text-align: center;
		width: 25%;
	}

	.card-item .t image {
		width: 80rpx;
		height: 80rpx;
		vertical-align: middle;
	}

	.b>view {

		font-size: 28rpx;
	}

	.card-item.bg0 {
		background-color: #ff4268;
		box-shadow: 0px 2px 5px 1px #ff4268;
	}

	.card-item.bg1 {
		background-color: #fc9d9a;
		box-shadow: 0px 2px 5px 1px #fc9d9a;

	}

	.card-item.bg2 {
		background-color: #facdae;
		box-shadow: 0px 2px 5px 1px #facdae;

	}

	.card-item.bg3 {
		background-color: #c9c8aa;
		box-shadow: 0px 2px 5px 1px #c9c8aa;
	}

	.card-item.bg4 {
		background-color: #84af9b;
		box-shadow: 0px 2px 5px 1px #84af9b;
	}

	.card-item.bg5 {
		background-color: #c9c;
		box-shadow: 0px 2px 5px 1px #c9c;
	}

	.card-item.bg6 {
		background-color: #ccf;
		box-shadow: 0px 2px 5px 1px #ccf;
	}

	.card-item.bg7 {
		background-color: #c99;
		box-shadow: 0px 2px 5px 1px #c99;
	}

	.card-item.bg8 {
		background-color: #6cc;
		box-shadow: 0px 2px 5px 1px #6cc;
	}

	.card-item.bg9 {
		background-color: #09c;
		box-shadow: 0px 2px 5px 1px #09c;
	}

	.card-item.bg10 {
		background-color: #f90;
		box-shadow: 0px 2px 5px 1px #f90;
	}

	.card-item.bg11 {
		background-color: #fc0;
		box-shadow: 0px 2px 5px 1px #fc0;
	}
</style>
